<template>
    <div>
        <!-- <one :maxlength="10" @input="Hinput"></one> -->
        <p>
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
            <el-button type="primary" @click="goAdd()">添加商品</el-button>
        </p>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="#" width="70">
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称" width="550">
            </el-table-column>
            <el-table-column prop="goods_price" label="商品价格(元)">
            </el-table-column>
            <el-table-column prop="goods_weight" label="商品重量(g)">
            </el-table-column>
            <el-table-column prop="add_time" label="创建时间">
                <template slot-scope="scope">
                    {{ new Date(scope.row.add_time * 1000).toLocaleString() }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="from.pagenum" :page-sizes="[10, 20, 30, 40]" :page-size="from.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 添加商品 -->
        <el-dialog :title="`${flag == true ? '修改商品' : '添加商品'}`" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input v-model="ruleForm.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                    <el-input type="number" v-model="ruleForm.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                    <el-input type="number" v-model="ruleForm.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                    <el-input type="number" v-model="ruleForm.goods_weight"></el-input>
                </el-form-item>
                <el-form-item label="商品图片" v-if="editId == ''">
                    <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>
                <el-form-item style="text-align:end">

                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { getGoods, addGoods, shopDelete, shopGoods, shopSearch } from '@/untils/api';
// import one from '../components/one.vue';
export default {
    name:"goods",
    props: [],
    data() {
        return {
            flag: false,//控制添加编辑窗口
            editId: '',
            input: '',
            tableData: [],
            fileList: [],//商品照片
            from: {
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            total: 0,
            ruleForm: {
                goods_name: '',
                goods_price: '',
                goods_number: '',
                goods_weight: '',
                pics: ''
            },
            dialogFormVisible: false,
            rules: {
                goods_name: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },

                ],
                goods_price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },

                ],
                goods_number: [
                    { required: true, message: '请输入商品数量', trigger: 'blur' },

                ],
                goods_weight: [
                    { required: true, message: '请输入商品重量', trigger: 'blur' },

                ]
            }
        }
    },
    methods: {
        Hinput(e) {
            console.log('', e);
        },
        search() {
            this.from.query = this.input
            // shopSearch(this.from).then(res => {
            this.page()
            this.input = ''
            //     this.pageQie()
            // })
        },
        //添加照片
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        // 添加
        goAdd() {
            this.$router.push('add')
            // this.dialogFormVisible = true;
            // this.flag = false
            // this.ruleForm = {}
            // this.editId = ''
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // console.log(this.ruleForm);
                    // console.log(this.editId);
                    if (this.editId) {
                        shopGoods({ ...this.ruleForm, goods_cat: "1,2,3" }).then(res => {
                            // console.log(res);
                            this.page()
                            //   console.log(res);

                        })
                        this.flag = false
                        // return false
                    } else {
                        // addGoods({ ...this.ruleForm, goods_cat: "1,2,3", }).then(res => {
                        //     // console.log(res);
                        //     this.page()

                        // })
                    }
                    this.dialogFormVisible = false
                    this.$refs[formName].resetFields();

                    return false;
                } else {
                    console.log('error submit!!');
                    return false;
                }

            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //编辑删除
        handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.flag = true
            this.editId = row.goods_id
            this.ruleForm = row
            // console.log(index, row);
        },
        handleDelete(index, row) {
            console.log(row);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                shopDelete({ id: row.goods_id }).then(res => {
                    // console.log(res);
                    this.page()
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            // console.log(index, row);
        },
        //分页
        handleSizeChange(val) {
            this.from.pagesize = val
            this.page()
            this.pageQie()
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.from.pagenum = val
            this.page()
            this.pageQie()
            // console.log(`当前页: ${val}`);
        },
        async page() {
            await getGoods(this.from).then(res => {
                // console.log(res);
                this.total = res.data.data.total
                this.tableData = res.data.data.goods
            })
        },
        pageQie() {
            this.page()
            this.tableData = this.tableData.slice((this.from.pagenum - 1) * this.from.pagesize, this.from.pagenum * this.from.pagesize)
        }
    },
    created() {
        this.page()
        this.pageQie()
    },
    // components: {
    //     one
    // }
}
</script>
<style lang="scss" scoped>
p {
    width: 50%;
    display: flex;

    .el-input {
        margin-right: 20px
    }
}
</style>


